<template lang="">
  <a-modal 
    :visible="visible" 
    :title="$t('tian-4')" 
    :centered="true" 
    width="650px"
    class="add-bank-card-modal"
    :closable="false">
    <a-form
      :model="formState"
      name="validate_other"
      v-bind="formItemLayout"
      @finishFailed="onFinishFailed"
      @finish="onFinish"
      ref="formRef"
    >
      <a-form-item
        name="ty"
        :label="$t('zhang-1')"
        :rules="[{ required: true, message: '请选择账号类型' }]"
      >
        <a-radio-group v-model:value="formState.ty">
          <a-radio-button value="2">{{ $t('yinH-1') }}</a-radio-button>
          <a-radio-button value="1">{{ $t('xuNi-1') }}</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        name="name"
        :label="$t('chiK')"
        extra="持卡人姓名与真实姓名一致才能取款成功"
      >
        <a-input v-show="realName"  v-model:value="realName" :placeholder="$t('chiK-0')" :disabled="true" />
      </a-form-item>

      <a-form-item
        name="withdrawal_password"
        :label="$t('quKu-0')"
        :labelCol="{span: 4}"
        :wrapperCol="{span: 20}"
        :rules="[{ required: true, message: '取款密码由4-16个字母，数字或符号组成,区分大小写' }]"
      >
        <a-input-password 
        size="small" v-model:value="formState.withdrawal_password" :placeholder="$t('quKu-1')" />
      </a-form-item>

      <a-form-item
        v-if="formState.ty == 2"
        name="bank_id"
        :label="$t('xuan-3')"
        :rules="[{ required: true, message: '请选择银行' }]"
      >
        <a-select
          v-model:value="formState.bank_id"
          style="width: 100%"
          :placeholder="$t('xuan-4')"
          option-label-prop="children"
          size="large"
        >
          <a-select-option 
            v-for="(item, index) in supportBrankList"
            :key="'brank-item' + index"
            :value="item.id" 
            :label="item.name">
            <span>
              <img :src="item.logo" style="width: 25px; height: 25px" alt="brank">
            </span>
           {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        v-else-if="formState.ty == 1"
        name="bank_id"
        :label="$t('xuan-5')"
        :rules="[{ required: true, message: '选择数字账户' }]"
      >
        <a-select
          v-model:value="formState.bank_id"
          style="width: 100%"
          :placeholder="$t('xuan-6')"
          option-label-prop="children"
          size="large"
        >
          <a-select-option 
            v-for="(item, index) in supportUSDTList"
            :key="'usdt-item' + index"
            :value="item.id" 
            :label="item.name">
            <span>
              <img :src="item.logo" style="width: 25px; height: 25px" alt="brank">
            </span>
           {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="formState.ty == 2"
        name="number"
        :label="$t('yinH-2')"
        :labelCol="{span: 4}"
        :wrapperCol="{span: 20}"
        :rules="[
          { required: true, message: '银行卡号长度在6-30范围内' },
          { min: 6, message: '银行卡号长度在6-30范围内' },
          { max: 30, message: '银行卡号长度在6-30范围内' }
        ]"
      >
        <a-input v-model:value="formState.number" :placeholder="$t('yinH-3')" />
      </a-form-item>

      <a-form-item
        v-if="formState.ty == 2"
        name="sub_branch"
        :label="$t('zhiH')"
        :labelCol="{span: 4}"
        :wrapperCol="{span: 20}"
      >
        <a-input v-model:value="formState.sub_branch" :placeholder="$t('ruSh')" />
      </a-form-item>

      <a-form-item
        v-if="formState.ty == 1"
        name="address"
        :label="$t('diZh')"
        :labelCol="{span: 4}"
        :wrapperCol="{span: 20}"
        :rules="[
          { required: true, message: '请填写地址' },
        ]"
      >
        <a-input v-model:value="formState.address" :placeholder="$t('qing-18')" />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button key="back" @click="handleCancel" size="large">{{ $t('quXi') }}</a-button>
      <a-button key="submit" type="primary"  html-type="submit" :loading="loading" @click="handleOk" size="large">{{ $t('queR-0') }}</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, reactive, onBeforeMount } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
import { getSystemBankCardList, getUserBankCardList, addVirtualCurrency, addBankCard } from '@/api/financial';
import { useUserStore } from '@/stores/userInfo';
import { message } from 'ant-design-vue';
import { generateMd5 } from '@/utils';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});
const formRef = ref();
const {user: userInfo} = useUserStore();
const loading = ref<boolean>(false);
const supportBrankList = ref<any[]>([]);
const userBrankList = ref<any[]>([]);
const supportUSDTList = ref<any[]>([]);
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const formState = reactive<Record<string, any>>({
  ty: "1",
  withdrawal_password: "",

  address: "",

  bank_id: "",
  number: "",
  sub_branch: "",
});
const realName = computed(() => userInfo.real_name || '');

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const emits = defineEmits(['ok', 'cancel']);
const handleOk = () => {
  

  if(!formRef.value) return;

  formRef.value
    .validate()
    .then((data: any) => {
      console.log(data, 1111)
      if (data && data.ty == 1) {
        addVirtualCurrency({
          bank_id: data.bank_id,
          withdrawal_password: generateMd5(data.withdrawal_password),
          address: data.address
        }).then((data: any) => {
          if (data.status === "OK") {
            message.success(t('tian-5'));
            modalClose();
            emits('ok');
          }
        })
      }else if (data.ty == 2) {
        addBankCard({
          withdrawal_password: generateMd5(data.withdrawal_password),
          bank_id: data.bank_id,
          number: data.number,
          sub_branch: data.sub_branch
        }).then((data: any) => {
          if (data.status === "OK") {
            message.success(t('tian-6'));
            modalClose();
            emits('ok');
          }
        })
      }
    })
};
const handleCancel = () => {
  modalClose();
  emits('cancel');
};
const modalClose = () => {
  
}

const fetchBankList = () => {
  getSystemBankCardList()
  .then((res: any) => {
    const list = res.list || [];
    supportBrankList.value = list.filter((item: any) => item.type === 2);
    supportUSDTList.value = list.filter((item: any) => item.type === 1);
  })
}


onBeforeMount(() => {
  fetchBankList();
});
</script>
<style lang="less">
.add-bank-card-modal {
  .ant-input-group-addon {
    padding: 0;
    background-color: transparent;
    border: none;
  }
}
</style>